// Create the directory directives.
angular.module('directoryDirectives', [])

// Create the alignment directive.
.directive('alignment', function() {
	return {
		/**
		 * The link function is responsible for registering DOM listeners as well as updating the DOM. 
		 * It is executed after the template has been cloned. 
		 * This is where most of the directive logic will be put.
		 * @param  {Scope} scope The scope to be used by the directive for registering watches.
		 * @param  {Instance Element} element The element where the directive is to be used.
		 * @param  {Instance Attributes} attributes Normalized list of attributes declared on this element shared between all directive linking functions.
		 * @param  {Instance Controller} controller  A controller instance if at least one directive on the element defines a controller.
		 */
		link: function(scope, element, attributes, controller) {
			/*---------------------
			  Define all variables.
			---------------------*/


			/*---------------------
			    Define the scope.
			---------------------*/
			scope.align = align;

			/*---------------------
			  Define all functions.
			---------------------*/
			function align() {
				return { textAlign: scope.horizontal, verticalAlign: scope.vertical };
			};
		},
		restrict: 'A',
		scope: {
			horizontal: '@',
			vertical: '@'
		},
		template: 
			'<div aligner ng-style="align()">' +
				'<div wrapper ng-transclude></div>' +
			'</div>',
		transclude: true
	};
})

// Create the directory directive.
.directive('directory', function() {
	return {
		controller: 'DirectoryController',
		/**
		 * The link function is responsible for registering DOM listeners as well as updating the DOM. 
		 * It is executed after the template has been cloned. 
		 * This is where most of the directive logic will be put.
		 * @param  {Scope} scope The scope to be used by the directive for registering watches.
		 * @param  {Instance Element} element The element where the directive is to be used.
		 * @param  {Instance Attributes} attributes Normalized list of attributes declared on this element shared between all directive linking functions.
		 * @param  {Instance Controller} controller  A controller instance if at least one directive on the element defines a controller.
		 */
		link: function(scope, element, attributes, controller) {
			/*---------------------
			  Define all variables.
			---------------------*/


			/*---------------------
			    Define the scope.
			---------------------*/
			scope.hover = false;
			scope.iconStyle = iconStyle;
			scope.selected = false;
			scope.$watch('hover', toggleHoverClass);
			scope.$watch('selected', toggleSelectClass);
			scope.$watch('selected', toggleExpand);

			/*---------------------
			  Define the element.
			---------------------*/

			// Add touch screen compatible events.
			if (Modernizr.touch) {
				element.bind('touchstart', toggleSelect);

			// Add cursor compatible events.
			} else {
				element.bind('click', toggleSelect);
				element.bind('mouseenter mouseleave', toggleHover);
			}

			/*---------------------
			  Define all functions.
			---------------------*/
			function iconStyle() {
				return { borderColor: scope.selected ? scope.highlight : scope.color };
			};

			function toggleExpand(expand) {
				element.css('margin', expand ? 200 : '');
			};

			function toggleHover() {
				scope.hover = !scope.hover;
				scope.$apply();
			};

			function toggleHoverClass(hover) {
				element.toggleClass('hover', hover)
			};

			function toggleSelect() {
				scope.selected = !scope.selected;
				scope.$apply();
			};

			function toggleSelectClass(selected) {
				element.toggleClass('selected', selected);
			};
		},
		restrict: 'A',
		scope: {
			actions: '=',
			color: '@',
			highlight: '@',
			name: '@'
		},
		template:
			'<div icon class="directory-icon" ng-style="iconStyle()"></div>' +
			'<div name class="directory-name">{{name}}</div>'
	};
})
